<template>
  <div class="seckill-container">
    <header class="seckill-header">
      <h1>限时秒杀</h1>
      <div class="countdown-wrapper">
        <span class="countdown-label">距结束还剩：</span>
        <CountDown :endTime="endTime" />
      </div>
    </header>

    <div class="seckill-products">
      <ProductItem
              v-for="product in products"
              :key="product.id"
              :product="product"
              @buy="handleBuy"
      />
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import CountDown from '../../components/CountDown.vue';
  import ProductItem from '../../components/ProductItem.vue';
  import {secKill} from '@/api/apiRequest.js';
  import { ElMessage } from 'element-plus'

  // 秒杀结束时间（24小时后）
  const endTime = ref(new Date().getTime() + 24 * 60 * 60 * 1000);

  // 商品数据
  const products = ref([
    {
      id: 1,
      name: 'Apple iPhone 14 Pro',
      price: 7999,
      seckillPrice: 6999,
      stock: 100,
      sold: 45,
      image: 'https://example.com/iphone.jpg'
    },
    {
      id: 2,
      name: '华为 Mate 50 Pro',
      price: 6799,
      seckillPrice: 5999,
      stock: 80,
      sold: 32,
      image: 'https://example.com/mate50.jpg'
    },
    {
      id: 3,
      name: '小米 13 Pro',
      price: 4999,
      seckillPrice: 4299,
      stock: 120,
      sold: 78,
      image: 'https://example.com/mi13.jpg'
    },
    {
      id: 4,
      name: '三星 Galaxy S23 Ultra',
      price: 9699,
      seckillPrice: 8999,
      stock: 60,
      sold: 28,
      image: 'https://example.com/s23.jpg'
    }
  ]);

  // 处理购买
  const handleBuy = async (productId) => {
    console.log(productId);
    const product = products.value.find(p => p.id === productId);
    if (product.stock <= 0) {
      ElMessage.error('该商品已售罄')
      return;
    }

    try {
      await secKill({id: productId,num: 1 })
      ElMessage.success('购买成功')
      // 其他业务逻辑（如更新本地库存）
    } catch (error) {
      // 处理特定错误（如库存不足）
      if (error.message.includes('库存')) {
        ElMessage.warning(error.message)
      } else {
        ElMessage.error('支付失败，请重试')
      }
    } finally {
      //isPurchasing.value = false // 重置按钮状态
    }


  };
</script>

<style scoped>
  .seckill-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Microsoft YaHei', sans-serif;
  }

  .seckill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(to right, #ff4e4e, #ff8a8a);
    color: white;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(255, 78, 78, 0.2);
  }

  .seckill-header h1 {
    margin: 0;
    font-size: 24px;
  }

  .countdown-wrapper {
    display: flex;
    align-items: center;
  }

  .countdown-label {
    margin-right: 10px;
    font-size: 16px;
  }

  .seckill-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  @media (max-width: 1024px) {
    .seckill-products {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 600px) {
    .seckill-products {
      grid-template-columns: 1fr;
    }
  }
</style>